<template>
	<view class="main">
		<!-- 顶部工具部分 -->
		<div class="top">
			<div class="left" @click="cancel()">取消</div>
			<div class="right">
				<button @click="post">发布</button>
			</div>
		</div>
		<div class="content">
			<u-input type="textarea" :height="400" :auto-height="true" v-model="content" :focus="true"
				:maxlength="2000" placeholder="请输入内容"></u-input>
			<div class="flex">
				<u-upload ref="uUpload" :action="''" :auto-upload="true" :before-upload="beforeUpload"></u-upload>
				
			</div>
		</div>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		nextTick,
		onMounted,
		ref
	} from 'vue';
	import { postTriend } from '../../api/triend.js'
	//取消发布
	const cancel = () => {
		uni.navigateBack(1)
	}
	const content = ref('')
	const imgs = ref([])
	//发布动态
	const post = async() => {
		const result = await postTriend({
			create_time:new Date(),
			content:content.value,
			user_id:uni.getStorageSync('userInfo').user_id,
			imgs:imgs.value,
		})
		if(result.code == 1){
			uni.showToast({
				title:'发布成功',
				icon:'none'
			})
			uni.navigateBack(1)
		}
		}
	const beforeUpload = (index,list) => {
		imgs.value = []
		list.forEach(async(item) => {
			const file = await uni.request({
				url:item.url,
				method:'GET',
				responseType:'arraybuffer',
			})
			const base64String = uni.arrayBufferToBase64(file.data)
			const imageUrl = `data:image/png;base64,${base64String}`
			imgs.value.push(imageUrl)
		})
		return false
	}
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		padding: 0 20rpx;

		//顶部工具部分
		.top {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			line-height: 100rpx;
			margin-top: 20rpx;

			.left {
				font-size: 40rpx;
				color: #000;
			}

			.right button {
				width: 160rpx;
				height: 80rpx;
				background-color: hotpink;
				color: #fff;
				line-height: 80rpx;
				font-size: 28rpx;
				border-radius: 80rpx;
				margin-top: 10rpx;
			}
		}

		.content {
			.flex {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;

				u-icon,
				.img-item {
					width: 200rpx;
					height: 200rpx;
					margin: 20rpx 10rpx;
					position: relative;

				}

				.img-item>u-icon {
					position: absolute;
					top: -100rpx;
					right: -170rpx;
					visibility: hidden;
				}

				.img-item:hover u-icon {
					visibility: visible;
				}
			}
		}
	}
</style>